<template>
  <div class="cumulation" ref="wrapper">
    <div>
      <user-header :userInfo="userInfo" :istrue="false"></user-header>
      <div class="block-1">
        <div class="block-tit">
          有效数据
          <span class="more">
            <router-link to="/my-youxiao">更多&gt;&gt;</router-link>
          </span>
        </div>
        <div>
          <mt-navbar v-model="active">
            <mt-tab-item id="0">昨天</mt-tab-item>
            <mt-tab-item id="1">今天</mt-tab-item>
            <mt-tab-item id="7">近7天</mt-tab-item>
            <mt-tab-item id="30">近30天</mt-tab-item>
          </mt-navbar>
          <mt-tab-container v-model="active">
            <mt-tab-container-item :id="active">
              <table class="table-item">
                <tr>
                  <td><b>预计佣金：</b>￥{{orderList.preBalance}}</td>
                  <td><b>预计积分：</b>{{orderList.prePoint}}</td>
                </tr>
                <tr>
                  <td><b>有效订单：</b>{{orderList.quantity}}</td>
                  <td><b>团队销售：</b>{{orderList.teamAmount}}</td>
                </tr>
              </table>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      <div class="block-2">
        <div class="block-tit">
          奖励数据
          <span class="more">
            <router-link to="/user-reward">更多&gt;&gt;</router-link>
          </span>
        </div>
      </div>
      <div class="block-3">
        <div class="block-tit">今日实时订单明细
          <span class="more">
            <!-- <router-link to="/user-reward">更多&gt;&gt;</router-link> -->
          </span>
        </div>
        <div class="block-item border" v-for="(item, index) of orderArray" :key="index">
            <div class="block-info border-bottom">
              <p><b class="item-b">订单编号：</b>{{item.orderSn}}</p>
              <p><b class="item-b">下单时间：</b>{{item.createDate}}</p>
            </div>
            <div v-for="(goods, inx) of item.itemArray" :key="inx" class="block-info border-bottom block-info-1">
              <div class="block-left">
                <router-link :to="'/detail/' + goods.goodsId">
                  <img v-show="goods.img" class="item-img" :src="goods.img" alt="">
                  <img v-show="!goods.img" class="item-img" src="/static/img/user.jpg" alt="">
                </router-link>
              </div>
              <div class="block-right">
                <p>{{goods.name}}</p>
                <p class="item-p"><!--佣金比例：20% &emsp;-->分成金额：{{goods.assignableValue}}</p>
              </div>
            </div>
            <div class="block-info block-info-2">
              <div class="block-list"><b class="item-b">订单类型：</b>{{item.status===true?"有效订单":"无效订单"}}</div>
              <!-- <div class="block-list"><b class="item-b">预估计佣金额：</b><span class="color-red">￥6666</span></div>
              <div class="block-list"><b class="item-b">预估佣金：</b><span class="color-red">￥8888</span></div> -->
            </div>
        </div>
      </div>
      <div class="text-right block-4">
        <b class="item-b">预估佣金总计：</b><span class="color-red">￥{{predictMoney}}</span>
      </div>
      <div style="height: .01rem"></div>
    </div>
    <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import Bscroll from 'better-scroll'
import UserHeader from './components/Header'
import UserInfo from './components/Info'
import UserOrder from './components/Order'
import PublicMenu from '../public/Menu'
export default {
  name: 'Cumulation',
  components: {
    UserHeader,
    UserInfo,
    UserOrder,
    PublicMenu
  },
  data () {
    return {
      active: '0',
      predictMoney: '',
      orderList: {},
      userInfo: {},
      orderArray: []
    }
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/member/getMemberData', {
        params: {
          'memberId': this.$store.state.userId
        }
      }).then((res) => {
        let datas = res.data
        // console.log(datas.data.orderArray)
        if (datas.code === 0 && datas.data) {
          this.userInfo = datas.data
          this.orderArray = datas.data.orderArray
          this.predictMoney = datas.data.predictMoney
        }
      })
      let type = 0
      if (this.active === '0') {
        type = 0
      }
      if (this.active === '1') {
        type = 1
      }
      if (this.active === '7') {
        type = 7
      }
      if (this.active === '30') {
        type = 30
      }
      axios.get('/meimai/interface/member/getOrderData', {
        params: {
          'memberId': this.$store.state.userId,
          'type': type
        }
      }).then((res) => {
        let datas = res.data
        if (datas.code === 0 && datas.data) {
          this.orderList = datas.data
        }
      })
    }
  },
  mounted () {
    this.getInfo()
    this.scroll = new Bscroll(this.$refs.wrapper, { click: true })
  },
  watch: {
    active () {
      this.getInfo()
      // console.log(this.active)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.cumulation >>> .mint-navbar .mint-tab-item.is-selected
  background-color: #11C930;
  border-bottom: 0
  color: #fff
.cumulation >>> .mint-navbar .mint-tab-item
  background-color: #F2F2F2;
  padding: .2rem 0
  margin: .2rem .05rem
  color: #333
.cumulation
  background-color: #f3f3f3
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0.98rem
  overflow: hidden
  .block-1
    background-color: #fff
    margin-top: .26rem
    padding: .5rem .3rem
    .block-tit
      position: relative
      font-size: .3rem
      font-weight: 700
      background-image: url(/static/img/cumulation.png)
      background-repeat: no-repeat
      background-position: left center;
      background-size: .3rem
      padding-left: .5rem
    .table-item
      width: 100%
      background: linear-gradient(to right, #FF4747, #FDB795)
      color: #fff
      border-radius: .06rem
      td
        padding: .2rem
        b
          color: #FFFA02
  .block-2
    margin-top: .26rem
    padding: 0 .3rem
    .block-tit
      position: relative
      font-size: .3rem
      font-weight: 700
  .block-3
    margin-top: .26rem
    background-color: #fff
    .more
      top: .3rem
      right: .3rem
      a
        color: #000
    .block-tit
      background-color: #FFE2E5
      padding: .3rem
      position: relative
      font-size: .3rem
      font-weight: 700
    .border
      border-bottom:5px solid #eee;
    .block-item
      padding: .1rem .3rem
      .block-info
        margin: .2rem 0
        padding-bottom: .2rem
        line-height: .38rem
        &.block-info-1
          display: flex
          justify-content: flex-start
          .block-left
            .item-img
              width: 2rem
              height: 1.4rem
          .block-right
            margin-left: .2rem
            .item-p
              margin-top: .2rem
              font-size: .26rem
        &.block-info-2
          display: flex
          justify-content: space-between
          font-size: .24rem
  .block-4
    padding: .2rem .3rem .6rem
    font-size: .3rem
    .item-b
      font-size: .34rem
  .item-b
    font-weight: 700
  .color-red
    color: red
  .color-green
    color: green
  .more
    position: absolute
    right: 0
    top: 0
    font-size: .23rem
    font-weight: 500
    a
      color: #000
</style>
